<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col section_1">
        <view class="flex-col section_2">
          <view class="flex-col">
            <text class="text_1">账户余额(元)</text>
            <text class="text_2">{{ balance.toFixed(2) }}</text>
          </view>
          <view class="justify-between group_2">
            <view
              class="flex-col"
              @click="toPath('/bundle/pages/recharge_record/recharge_record')"
            >
              <text>充值记录</text>
            </view>
            <view class="section_3"> </view>
            <view
              class="flex-col"
              @click="toPath('/bundle/pages/consume_record/consume_record')"
            >
              <text>消费明细</text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-col section_4">
        <view class="flex-col">
          <view class="flex-row group_4">
            <view class="section_5"> </view>
            <text class="text_6">余额充值</text>
          </view>
          <view class="grid">
            <view
              v-for="(item, index) in moneyList"
              :key="index"
              :class="
                moneySelect == index
                  ? 'flex-col items-center grid-item active'
                  : 'flex-col items-center grid-item'
              "
              @tap.stop="choice(index)"
            >
              <view class="group_5">
                <text class="text_7">￥</text>
                <text class="text_8">{{ item.price }}</text>
              </view>
              <view class="group_6">
                <text class="text_7">赠 </text>
                <text class="text_8">{{ item.give }}</text>
              </view>
            </view>
          </view>
          <view class="flex-col group_7">
            <view class="flex-row section_11">
              <text class="text_21">￥</text>

              <text class="text_22">
                <input
                  type="digit"
                  placeholder="输入自定义金额"
                  v-model="money"
              /></text>
            </view>
            <view class="flex-col items-center button" @click="comfirm">
              <text>充值</text>
            </view>
            <text class="text_23"
              >充值说明 <br />1：本次充值<span
                style="text-decoration: underline"
                >仅限于在本平台消费</span
              >。 <br />2：充值和赠送的金额均<span
                style="text-decoration: underline"
                >不可以提现，转移，转赠，退款</span
              >。 <br />3：使用范围：本平台所有项目购买，以及交通费用支付。
              <br />4：若遇到充值未到账，请联系平台客服处理。
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ali from "../../../static/icon/ali.png";
export default {
  data() {
    return {
      balance: 0,
      moneySelect: 1,
      payShow: false,
      moneyList: [],
      payList: [
        {
          name: "微信",
          value: 2,
          icon: "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844672536278668.png",
          disabled: false,
        },
        {
          name: "支付宝",
          icon: ali,

          value: 3,
          disabled: false,
        },
      ],
      pay_way: 2,
      price: "",
      money: "",
      id: null,
      time: null,
      count: 0,
    };
  },
  onLoad() {
    this.init();
  },
  onShow() {
    // 当前是否是有支付订单存在
    // 如果有 轮询10次，查看是否支付，10次完跳转订单列表
    const sn = uni.getStorageSync("recharge_sn");
    if (sn) {
      this.count = 5;
      this.checkOrderStatus(sn, "recharge");
    }
  },
  onHide() {
    if (this.time) {
      clearTimeout(this.time);
    }
  },
  watch: {
    money(val) {
      var isSitem = false;
      if (val) {
        for (let item of this.moneyList) {
          if (Number(val) == Number(item.price)) {
            isSitem = true;
            break;
          }
        }
        if (!isSitem) {
          this.moneySelect = null;
        }
        this.price = val;
      }
    },
  },
  methods: {
    init() {
      // 获取账户余额
      this.$http.post("api/recharge/index").then((res) => {
        this.balance = Number(res.balance);
      });
      // 充值列表
      this.$http.post("api/recharge/rechargeList").then((res) => {
        let { list } = res;
        this.moneyList = list;
        this.moneySelect = 1;
        this.money = this.moneyList[1].price;
      });
    },
    choice(e) {
      this.moneySelect = e;
      this.money = this.moneyList[e].price;
      this.price = this.moneyList[e].price;
      // let index = e + 1;
      // let price = '';
      // price = index === 4 ? 600 : index === 5 ? 800 : index === 6 ? 1000 : index * 100;
    },
    close() {
      this.payShow = false;
    },
    comfirm() {
      if (this.moneySelect === null) {
        this.price = this.money;
        this.id === null;
      } else {
        this.price = this.moneyList[this.moneySelect].price;
      }
      this.topay();
    },
    toPath(url) {
      uni.navigateTo({
        url,
      });
    },
    topay() {
      let obj = {};
      if (this.moneySelect == null) {
        obj.price = this.money;
      } else {
        obj.id = this.moneyList[this.moneySelect].id;
      }
      this.$http.post("api/recharge/createOrder", obj).then((sn) => {
        uni.setStorageSync("recharge_sn", sn);
        this.$http
          .post("api/pay/pay", { order_sn: sn, pay_way: 4, form: "recharge" })
          .then((res) => {
            plus.runtime.openURL(res.url_link);
          });
      });
    },
    checkOrderStatus(order_sn, form) {
      this.time = setTimeout(async () => {
        const res = await this.$http.post("api/wxapp/check_order_status", {
          order_sn,
          form,
        });
        if (res.code === 1) {
          // 支付成功了
          uni.removeStorageSync("recharge_sn");
          clearTimeout(this.time);
          // 刷新一下余额
          this.$http.post("api/recharge/index").then((res) => {
            this.balance = Number(res.balance);
          });
          return;
        }
        this.count--;
        if (this.count <= 0) {
          clearTimeout(this.time);
          uni.removeStorageSync("recharge_sn");
          return;
        }
        this.checkOrderStatus(order_sn, form);
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
@import "wallet.scss";
</style>
